﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8" />
  <title>Spring Security Login</title>
  <link rel="icon" href="../images/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
  <!-- 引入 element-ui 的样式-->
  <link rel="stylesheet" href="../css/element.css">
  <!-- 必须先引入 vue, 再引入 element-ui -->
  <script src="../js/vue.js"></script>
  <!-- 引入 element-ui 的组件库-->
  <script src="../js/element.js"></script>
</head>

<body>
  <div id="app">
    <div class="login-container">
      <el-form label-position="left" label-width="0px" class="login-form" th:action="${loginUrl}" method="POST">
        <el-form-item style="margin-bottom: 22px">
          <h1 align="center" style="color: white;">OAuth2.0</h1>
        </el-form-item>
        <el-form-item prop="userName" style="margin-bottom: 22px">
          <el-input size="small" name="username" v-model="loginForm.userName" autoComplete="on"
                    placeholder="用户名(默认:admin)" prefix-icon="el-icon-user">
          </el-input>
        </el-form-item>
        <el-form-item prop="password" style="margin-bottom: 22px">
          <el-input size="small" name="password" type="password" v-model="loginForm.password" autoComplete="off"
                    placeholder="密码(默认:admin)" prefix-icon="el-icon-lock">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" class="login-button" :loading="loading" native-type="submit">登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        loginForm: {
          userName: '',
          password: ''
        },
        loading: false
      }
    })
  </script>

  <style scoped>
    .login-container {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(5, 15, 31, 1.0);
      display-outside: ruby;
    }

    .login-form {
      width: 300px;
      margin: 160px auto; /* 上下间距160px，左右自动居中*/
      background-color: rgba(32, 32, 27, 0.8); /* 透明背景色 */
      padding: 30px;
      border-radius: 10px /* 圆角 */
    }

    .login-button {
      margin-top: 20px;
      width: 100%;
      border-radius: 2px
    }
  </style>
</body>

</html>